<template>
  <div class="chart1" >
   <div class="bq-all">
        <span class="xian"></span>
        施工方人员填报信息完整率
    </div>
    <div id="myChart2" :style="{width: '400px', height: '400px'}"></div>
  </div>
</template>
<style lang="scss" scoped>
  .chart1{
    width: 400px;
    background-color: #fff;
        .bq-all {
      width: 94%;
      margin: auto;
      height: 60px;
      line-height: 60px;
      font-size: 16px;
      font-weight: bold;
      color: #333;
      position: relative;
      .xian {
        width: 3px;
        height: 16px;
        background: #1ab394;
        display: inline-block;
        position: relative;
        top: 1px;
        margin-left: 10px;
        margin-right: 8px;
      }
    }
  }
</style>
<script>
export default {
  name: "hello",
  data() {
    return {
      msg: "Welcome to Your Vue.js App"
    };
  },
  mounted() {
    this.drawLine();
  },
  methods: {
    drawLine() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById("myChart2"));
      // 绘制图表
      myChart.setOption({
        // title: {
        //     text: '项目方人员填报信息完整率',
        //     // subtext: '纯属虚构',
        //     left: 'center'
        // },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
          orient: "vertical",
          left: "left",
          data: ["未打卡", "已打卡"]
        },
        series: [
          {
            name: "施工方人员填报信息",
            type: "pie",
            radius: "55%",
            center: ["50%", "60%"],
            data: [
              { value: 135, name: "未打卡" },
              { value: 168, name: "已打卡" }
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)"
              }
            }
          }
        ]
      });
    }
  }
};
</script>
